<template>
	<div style="padding:0px;">
		<el-card class="box-card">
		  <div slot="header" class="clearfix">
		    
		    <span style="line-height: 30px;" >轮播图管理</span>
		  </div>
		  <div  class="text item">
			<el-form :model="dialogForm" :rules="rules" ref="dialogForm" :label-width="formLabelWidth">
			  	<el-form-item label="活动主题"  prop="activityTheme">
			      <el-input v-model="dialogForm.activityTheme" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			    <el-form-item label="链接地址"  prop="linkUrl">
			      <el-input v-model="dialogForm.linkUrl" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			    <el-form-item label="主题图标"  > <!-- qiniuImage:七牛图片对象  packJson:上传张数大小等参数配置  id:七牛组件id canDelete:是否可操作删除图片 -->
			        <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
			        
			      <el-alert title="图片尺寸 : 750*380" type="warning" show-icon :closable='false'></el-alert>
			    </el-form-item>
			  </el-form>
			</div>
		</el-card>
		<div  style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script>

    import qiniu from '@/views/qiniu/upload'
    import agentHttp from '@/utils/agentHttp.js'
    import {require,prop} from '@/utils/rules.js'
	export default{
		components:{qiniu},
		created(){		
			if(this.dialogSendData.id!==""){
	      		//修改
	      		this.selectData(); 
	      	}
        },
        
        updated(){
        },
		props:['dialogSendData','tableData'],
		data(){
			return{
				
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		         dialogForm:{
		          imagUrl:[],   //七牛图片地址
		          activityTheme:"",
		          linkUrl:""
		         
		        },
		        //验证规则
		        rules: {
		          'activityTheme':[require('活动主题',{trigger:"blur"})],
		          'linkUrl':[require('链接地址',{trigger:"blur"})],
		        },
                //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]    //图片上传的列表  只含有url地址
		        },
		        packJson:{
					maxLength:3,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				}
			}
		},methods:{
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
		          		//添加
		          	    this.addData();
		          	}else{
		          		//修改
		          		this.editData();
		          	}
		          } else {
		            this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		                return false;
		          	})
		          }
		        });
			},
		    addData(){
		      if (this.setImageUrl()) {	
		        this.dialogForm.imagUrl=this.qiniuImage.image_uri.join(",")
		        agentHttp.postJson('adminApi/admin/carousel/post_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"添加成功");
		                setTimeout(()=>{
	            		this.dialogSendData.dialogFormVisible=false;
	            	  },500)
		            } 
		        }) 
		       } 
		    },
		    editData(){
		     if (this.setImageUrl()) {
		        agentHttp.putJson('adminApi/admin/carousel/put_validated',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"修改成功");
		                setTimeout(()=>{
	            		this.dialogSendData.dialogFormVisible=false;
	            	  },500)
		            } 
		        })
		      }   
		    },
		    selectData(){
		    	//console.log('取消下方注释，修改请求地址')
		        agentHttp.get('adminApi/admin/carousel/select_carousel/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){  
		            	this.dialogForm=data.data;
		            	this.qiniuImage.image_uri=data.data.imagUrl.split(',').notempty()//去掉为空的项，不然导致图片张数控制不准
		            } 
		        }) 
		    },
		    setImageUrl(){
               	this.dialogForm.imagUrl=this.qiniuImage.image_uri.join(",");
               	if(this.dialogForm.imagUrl.length<1){
               		this.$message.warning('主题图标图片至少一张');
		            return false;
               	}
               	  return true;
             },

		}
	}
</script>
